<template>
  <div class="use-electron-container">
    
    <!-- 头部区域 -->
    <div class="header">
      <div class="header-bottom">
        <i class="back-icon" @click="goBack">‹</i>
        <div class="page-title">启动用电</div>
      </div>
    </div>

    <!-- 主交互区域 -->
    <div class="main-interactive">
      <div class="electricity-icon">
        <div class="icon-circle">
          <i class="plug-icon">⚡</i>
        </div>
      </div>
      <div class="status-button">
        <span>等待用电</span>
      </div>
      <div class="slogan">
        你用电 我用心
      </div>
    </div>

    <!-- 信息详情区域 -->
    <div class="info-section">
      <div class="info-item">
        <span class="label">安装地址</span>
        <span class="value">{{ powerPointInfo.installAddress }}</span>
      </div>
      <div class="info-item">
        <span class="label">电能表编号</span>
        <span class="value">{{ deviceInfo.meterNo }}</span>
      </div>
      <div class="info-item">
        <span class="label">白码</span>
        <span class="value">{{ deviceInfo.qrcode }}</span>
      </div>
      <div class="info-item">
        <span class="label">用电类型</span>
        <span class="value">{{ powerPointInfo.powerType ==1 ? '交流电' : '直流电' }}</span>
      </div>
      <div class="info-item">
        <span class="label">用电状态</span>
        <span class="value">{{ deviceInfo.deviceStatus == 1 ? '未上线' : deviceInfo.deviceStatus == 3 ? '使用中' : '空闲' }}</span>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-section">
      <button class="start-button" @click="startElectricity" :disabled="isWaiting">
        启动用电
      </button>      
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { listDevice } from '@/api/device/device'
import { getElectricityPrice } from '@/api/config/config'
import { getIot, setPwrSta } from "@/api/device/iot"

export default {
  name: 'UseElectron',
  data() {
    return {
      deviceInfo: { },
      isWaiting: false,
      powerPointInfo: { },
      iotModule: { },
      loading: false,
      intervalId: null,
      retryCount: 0
    }
  },
  mounted() {
    this.getDeviceInfo()
  },
  methods: {
    startElectricity() {
      this.isWaiting = true
      this.$message.success('正在启动用电...')
      // 这里可以添加启动用电的逻辑
      setPwrSta(this.iotModule.imei, 1)
      .then(response => {
        this.$message.success('发送启动用电指令成功')
        //this.$router.push('/wechat/inUsing')
        
        this.intervalId = setInterval(() => {
          const query = {
            meterNo: window.meterNo
          }
          listDevice(query).then(response => {
            this.deviceInfo = response.rows[0]
            if (this.deviceInfo.deviceStatus == 3) {
              this.isWaiting = false
              this.$message.success('用电启动成功！')
              clearInterval(this.intervalId)
              this.intervalId = null
              this.$router.push('/wechat/inUsing')
            } else {
              if (this.retryCount >= 5) {
                this.isWaiting = false
                this.$message.error('用电启动失败')
                clearInterval(this.intervalId)
                this.intervalId = null
                this.retryCount = 0
              } else {
                this.retryCount++
              }
            }
          })            
        }, 2000)
        
      })
      .catch(error => {
        this.$message.error('发送启动用电指令失败')
      })
    },
    async getDeviceInfo() {
      this.loading = true
      try {
        const query = {
          meterNo: window.meterNo
        }
        
        const result = await listDevice(query)
        
        if (result.code === 200 && result.rows && result.rows.length > 0) {
          this.deviceInfo = result.rows[0]
          window.meterId = this.deviceInfo.id
          this.powerPointInfo = this.deviceInfo.powerPointInfo
          console.log('设备信息:', this.deviceInfo)
          if (this.deviceInfo.deviceStatus == 1) {
            Message.warning('设备未上线，无法进行用电')
            return
          } else if (this.deviceInfo.deviceStatus == 3) {
            Message.warning('设备使用中，无法进行用电')
            return
          }
          const resp = await getIot(this.deviceInfo.iotModuleId)
          this.iotModule = resp.data
          window.imei = this.iotModule.imei
        } else {
          Message.warning(`未找到表号为 ${this.meterNo} 的设备信息`)
        }
      } catch (error) {
        console.error('查询设备信息失败:', error)
        Message.error('查询设备信息失败')
      } finally {
        this.loading = false
      }
    },
    goBack() {
      this.$router.push('/wechat/index')
    },
    closePage() {
      this.$router.push('/wechat/index')
    }
  }
}
</script>

<style scoped>
.use-electron-container {
  min-height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #000;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signal-bars {
  display: flex;
  gap: 2px;
}

.bar {
  width: 3px;
  height: 6px;
  background: white;
  border-radius: 1px;
}

.battery {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 头部样式 */
.header {
  background: #1890ff;
  color: white;
  padding: 16px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title-center {
  text-align: center;
}

.main-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.sub-title {
  font-size: 12px;
  opacity: 0.8;
}

.header-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.close-icon, .more-icon, .back-icon {
  font-size: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主交互区域样式 */
.main-interactive {
  background: #1890ff;
  padding: 40px 20px;
  text-align: center;
  color: white;
}

.electricity-icon {
  margin-bottom: 24px;
}

.icon-circle {
  width: 120px;
  height: 120px;
  border: 3px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.plug-icon {
  font-size: 48px;
}

.status-button {
  background: white;
  color: #1890ff;
  padding: 8px 24px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 600;
}

.slogan {
  font-size: 16px;
  font-weight: 500;
}

/* 信息详情区域样式 */
.info-section {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #666;
  font-size: 14px;
  min-width: 80px;
}

.value {
  color: #333;
  font-size: 14px;
  text-align: right;
  flex: 1;
  margin-left: 16px;
}

/* 底部区域样式 */
.bottom-section {
  padding: 20px 16px;
  background: white;
}

.start-button {
  width: 100%;
  background: #1890ff;
  color: white;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background-color 0.3s;
}

.start-button:hover {
  background: #40a9ff;
}

.start-button:active {
  background: #096dd9;
}

.start-button:disabled {
  background: #d9d9d9;
  color: #999;
  cursor: not-allowed;
}

.start-button:disabled:hover {
  background: #d9d9d9;
}

.bottom-nav {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}

.nav-arrow {
  font-size: 24px;
  color: #999;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow:hover {
  color: #666;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .info-section {
    margin: 12px;
    padding: 16px;
  }
  
  .icon-circle {
    width: 100px;
    height: 100px;
  }
  
  .plug-icon {
    font-size: 40px;
  }
}

/* 图标样式 */
.wifi-icon::before {
  content: "📶";
}

.battery-icon::before {
  content: "🔋";
}
</style>
